<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 209px;height: 255px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'internationEc2l',
		methods: {
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;  //通过ref获取到DOM节点
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				//配置图表
				const option = {
					backgroundColor: '#00043A',
					tooltip: {
						trigger: 'axis',
						show: false,
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					legend: {
						show: false
					},
					grid: {
						// left: '12%',
						right: '3%',
						bottom: '3%',
						width: "80%",
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						type: 'value',
						show: false,
						inverse:true,
					}],
					yAxis: [{
						splitLine: {
							show: false
						},
						axisLine: { //y轴
							show: false
						},
						type: 'category',
						axisTick: {
							show: false
						},
						inverse: true,
						position: 'right',
						data: ['第一季度', '第二季度', '第三季度', '第四季度'],
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 12,
						    formatter: function (val) {
						        var strs = val.split('');  //转化为字符串数组
						        var str = ''
						            for (var i = 0, s; s = strs[i++]; ) {
						                str += s;
						                if (!(i % 2))     //两个字符换行
						                    str += '\n'; 
						            }
						        return str
						 
						    }
						}
					}],
					series: [{
						name: '2019',
						type: 'bar',
						barWidth: 12, // 柱子宽度
						label: {
							show: true,
							position: 'left', // 位置
							color: '#FFFFFF ',
							fontSize: 14,
							distance: 15, // 距离
							formatter: '{c}' // 这里是数据展示的时候显示的数据
						}, // 柱子上方的数值
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							                    offset: 0,
							                    color: '#F976D2 '
							                }, {
							                    offset: 1,
							                    color: '#F9D19C ' 
							                }], false), // 渐变
						},
						data: [21, 60, 50, 48]
					}, ]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
				    myChart.resize();  //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
